<template>
	<view class="page">
		<status-bar :title='postTitle'></status-bar>
		<backTop v-if='toTop'></backTop>
		<template v-if='tabs.length > 0'>
			<scroll-view scroll-y="true" scroll-x="true" class="nav-tabs flex-box"  :style="{top:navHeight+'px'}"
			scroll-with-animation='true'
			@scroll="scroll"
			:scroll-into-view="currTab<3?'item0':'item'+currTab" v-if='tabs.length > 0'>
				<view class="item" @click="tabChange(i,item.classifyid)" :id="'item'+i" v-for="(item,i) in tabs" :key='i'>
					<text :class="i == currTab?'thmeColor active':''"  :style="{'--color': color}">{{item.name}}</text>
				</view>
				<view class="active-line toRight" :style="{left:lineLeft+'px','--color': color,'--color_aid': color_aid}"></view>
			</scroll-view>
			<swiper :duration="500" :style="{height: swiperHeight+'px'}" @change="swiperChange">
				<swiper-item v-for="(sw,i) in tabs" :key='i'>
					<view class="post-list" v-if='list.length > 0'>
						<waterfallsFlow :list="list" @getHeight='getHeight' @image-click='toDetail'>
							<!-- #ifndef H5  -->
							<view v-for="(item, index) of list" :key="index" slot="slot{{index}}" @click="toDetail(item)">
								<view class="post-user flex-box align-center">
									<image class="avatar" @error="item.headimg = ''" :src="item.headimg?item.headimg:staticUrl + '/static/images/head.jpg'"
									 mode="aspectFill"></image>
									<view class="user-name lines flex">{{ item.uname }}</view>
								</view>
			
								<view class="flex-box post-num">
									<view class="flex-box align-center">
										<text class="iconfont icon-browse"></text>
										<text class="num" :class="{MORE:parseInt(item.watch) > 999}">{{parseInt(item.watch) > 999?999:item.watch}}</text>
									</view>
									<view class="flex-box align-center">
										<text class="iconfont icon-guanzhu1"></text>
										<text class="num" :class="{MORE:parseInt(item.zan) > 999}">{{parseInt(item.zan) > 999?999:item.zan}}</text>
									</view>
									<view class="flex-box align-center">
										<text class="iconfont icon-pinglun"></text>
										<text class="num" :class="{MORE:parseInt(item.pinlun) > 999}">{{parseInt(item.pinlun) > 999?999:item.pinlun}}</text>
									</view>
								</view>
							</view>
							<!--  #endif -->
							<!-- #ifdef H5 -->
							<template v-slot:default="{item}">
								<view @click="toDetail(item)">
									<view class="post-user flex-box align-center">
										<image class="avatar" @error="item.headimg = ''" :src="item.headimg?item.headimg:staticUrl + '/static/images/head.jpg'"
										 mode="aspectFill"></image>
										<view class="user-name lines flex">{{ item.uname }}</view>
									</view>
									<view class="flex-box post-num">
										<view class="flex-box align-center">
											<text class="iconfont icon-browse"></text>
											<text class="num" :class="{MORE:parseInt(item.watch) > 999}">{{parseInt(item.watch) > 999?999:item.watch}}</text>
										</view>
										<view class="flex-box align-center">
											<text class="iconfont icon-guanzhu1"></text>
											<text class="num" :class="{MORE:parseInt(item.zan) > 999}">{{parseInt(item.zan) > 999?999:item.zan}}</text>
										</view>
										<view class="flex-box align-center">
											<text class="iconfont icon-pinglun"></text>
											<text class="num" :class="{MORE:parseInt(item.pinlun) > 999}">{{parseInt(item.pinlun) > 999?999:item.pinlun}}</text>
										</view>
									</view>
								</view>
							</template>
							<!-- #endif -->
							
						</waterfallsFlow>
					</view>
					<empty v-if='noData' cat='3' type='1' :msg='tabs[currTab].name+"下还没有内容哦 ~ "'></empty>
				</swiper-item>
			</swiper>
		</template>
		<empty v-else cat='4' type='1' msg='暂无分类'></empty>
		<view class="postEnter thmeBg" :style="{'--color': color}" @click='toFt'>
			<image class="editorImg" :src="staticUrl+'/images/jh_up/icon-post1.png'"></image>
		</view>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/waterfall/waterfall.vue";
	var that, k = 12
	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				postTitle: getApp().globalData.postConfig.postTitle,
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				showModal:false,
				toTop:false,
				
				currTab: 0,
				lineLeft: 0,
				tabs: [],
				staticUrl: this.staticUrl,
				bid: uni.getStorageSync('bid'),
				noData: false,
				showDiLine: false,
				more: false,
				list: [],
				swiperHeight: 0,
				page: 1,
				pagecount: 10,
				classifyid: '',
				vid: uni.getStorageSync('vid'),
				scrollLeft: 0
			};
		},
		mounted() {
			that = this
			this.vid = uni.getStorageSync('vid')
			uni.setNavigationBarTitle({
				title: getApp().globalData.postConfig.postTitle
			})
			that.get_classify();
			that.swiperHeight = uni.getSystemInfoSync().screenHeight
			// #ifdef H5
			this.H5Share('pageType=14','')
			// #endif
			setTimeout(function(){
				that.getLineLeft()
			},200)
		},
		onPullDownRefresh() {
			that.page = 1
			that.list = []
			that.getList()
			that.getLineLeft()
		},
		methods: {
			toFt() {
				let vid = uni.getStorageSync('vid')
				if (vid) {
					uni.navigateTo({
						url: '/otherPage/quanZ/post?clsfid=' + that.classifyid
					})
				} else {
					that.showModal = true;
				}
			},
			scroll(e){
				that.scrollLeft = e.detail.scrollLeft
			},
			toDetail(item){
				uni.navigateTo({
					url:'/otherPage/quanZ/postDetail?fileid='+item.file_id+'&ftvid='+item.ftvid
				})
			},
			getHeight(h) {
				if (h > that.swiperHeight)
					that.swiperHeight = h
			},
			getLineLeft() {
				if(that.currTab > -1){
					uni.createSelectorQuery().select("#item" + that.currTab).boundingClientRect(function(res) {
						that.lineLeft = res.left + res.width / 2 - 14 + that.scrollLeft
					}).exec();
				}
				
			},
			swiperChange(e) {
				that.currTab = e.detail.current;
				that.page = 1
				that.classifyid = that.tabs[that.currTab].classifyid
				that.list = []
				that.getLineLeft()
				that.getList()
			},
			tabChange(i, id) {
				if (that.currTab != i) {
					that.currTab = i
					that.page = 1
					that.classifyid = id
					that.list = []
					that.getLineLeft()
					that.getList()
				}
			},
			get_classify() { // 微社区内容分类
				that.$http.post({
					url: '/SRA_UserApp/classify',
					data: {
						bid: that.bid,
					}
				}).then(res => {
					if (res.data) {
						that.tabs = res.data
						that.classifyid = res.data[0].classifyid
						that.getList()
					}
				})
			},
			getList() { // 获取分类下的帖子 -- 全部
				that.noData = false
				that.showDiLine = false
				that.more = false
				that.$http.post({
					url: '/zzjApp/getClass',
					data: {
						bid: that.bid,
						classifyid: that.classifyid,
						pageindex: that.page,
						v_id: that.vid,
						pagecount: that.pagecount
					}
				}).then(res => {
					if (res) {
						that.list = that.list.concat(res)
						if (res.length > that.pagecount - 1) {
							that.more = true
							that.page++
						}
					}
					if (that.list.length > 0 && (!res || res.length < that.pagecount)) {
						that.showDiLine = true
					}
					if (that.list.length < 1) {
						that.noData = true
					}
					uni.stopPullDownRefresh()
				})
			},
		},
		onReachBottom() {
			if (that.more) {
				that.getList()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true
			} else {
				that.toTop = false
			}
		},
		onShareTimeline() {
			let vid = uni.getStorageSync('vid');
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=14',
				imageUrl: shareData.imageUrl
			}
		},
		onShareAppMessage(option) {
			let vid = uni.getStorageSync('vid');
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=14',
				imageUrl: shareData.imageUrl
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 88rpx;
	}

	.nav-tabs {
		height: 88rpx;
		width: 100%;
		top: 0;
		box-sizing: border-box;
		overflow-y: hidden;
		position: fixed;
		border-bottom: 1px solid #F2F2F2;
		background-color: #FFFFFF;
		z-index: 3;
		white-space:nowrap;
		.item {
			line-height: 88rpx;
			display: inline-block;
			padding: 0 $uni-page-space;

			text {
				font-size: 32rpx;
				color: #999999;
			}

			.active {
				font-weight: bold;
			}
		}

		.active-line {
			height: 6rpx;
			width: 28px;
			position: absolute;
			bottom: 0;
			left: 0;
			transition: left .15s;
		}
	}

	.post-list {
		.post-user {
			padding: 20rpx 10rpx;

			.avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.post-num {
			justify-content: space-around;

			>view {
				text-align: center;

				.iconfont {
					font-size: 30rpx;
					color: #AFAFAF;
					margin-right: 6rpx;
					position: relative;
					top: 2rpx;
				}

				.icon-browse {
					font-size: 34rpx;
				}
			}
		}
	}
</style>
